<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="News - Clean HTML5 and CSS3 responsive template">
<meta name="author" content="MyPassion">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<title>News - Responsive HTML5 and CSS3 template</title>

<link rel="shortcut icon" href="img/sms-4.ico" />

<!-- STYLES -->
<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="css/fontello/fontello.css" />
<link rel="stylesheet" type="text/css" href="css/flexslider.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/ui.css" />
<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/960.css" />
<link rel="stylesheet" type="text/css" href="css/devices/1000.css" media="only screen and (min-width: 768px) and (max-width: 1000px)" />
<link rel="stylesheet" type="text/css" href="css/devices/767.css" media="only screen and (min-width: 480px) and (max-width: 767px)" />
<link rel="stylesheet" type="text/css" href="css/devices/479.css" media="only screen and (min-width: 200px) and (max-width: 479px)" />
<link href='http://fonts.googleapis.com/css?family=Merriweather+Sans:400,300,700,800' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]> <script type="text/javascript" src="js/customM.js"></script> <![endif]-->


</head>

<body>

<!-- Body Wrapper -->
<div class="body-wrapper">
	<div class="controller">
    <div class="controller2">

        <!-- Header -->
        <header id="header">
            <div class="container">
                <div class="column">
                    <div class="logo">
                        <a href="../static/index.html"><img src="img/logo.png" alt="MyPassion" /></a>
                    </div>
                    
                    <div class="search">
                        <form action="" method="post">
                            <input type="text" value="Search." onblur="if(this.value=='') this.value='Search.';" onfocus="if(this.value=='Search.') this.value='';" class="ft"/>
                            <input type="submit" value="" class="fs">
                        </form>
                    </div>
                    
                    <!-- Nav -->
                    <nav id="nav">
                        <ul class="sf-menu">
                            <li class="current"><a href="../static/index.html">Home.</a></li>
                            <li>
                            	<a href="#">Pages.</a>
                                <ul>
                                    <li><i class="icon-right-open"></i><a href="leftsidebar.html">Left Sidebar.</a></li>
                                    <li><i class="icon-right-open"></i><a href="reviews.html">Reviews.</a></li>
                                    <li><i class="icon-right-open"></i><a href="single.html">Single News.</a></li>
                                    <li><i class="icon-right-open"></i><a href="features.html">Features.</a></li>
                                    <li><i class="icon-right-open"></i><a href="contact.html">Contact.</a></li>
                                </ul>
                            </li>
                            <li><a href="reviews.html">World.</a></li>
                            <li><a href="reviews.html">Business.</a></li>
                            <li><a href="reviews.html">Politics.</a></li>
                            <li>
                                <a href="reviews.html">Sports.</a>
                                <ul>
                                    <li><i class="icon-right-open"></i><a href="#">Football.</a></li>
                                    <li><i class="icon-right-open"></i><a href="#">Running.</a></li>
                                    <li><i class="icon-right-open"></i><a href="#">Tennis.</a></li>
                                    <li><i class="icon-right-open"></i><a href="#">Fitness.</a></li>
                                    <li><i class="icon-right-open"></i><a href="#">Golf.</a></li>
                                    <li><i class="icon-right-open"></i><a href="#">Motosport.</a></li>
                                </ul>
                            </li>
                            <li><a href="reviews.html">Health.</a></li>
                            <li><a href="reviews.html">Science.</a></li>
                            <li><a href="reviews.html">Music.</a></li>
                            <li><a href="reviews.html">Tech.</a></li>
                        </ul>
                        
                    </nav>
                    <!-- /Nav -->
                </div>
            </div>
        </header>
        <!-- /Header -->
        
        <!-- Content -->
        <section id="content">
            <div class="container">
            	
                <div class="breadcrumbs column">
                	<p><a href="#">Home.</a>   \\   <a href="#">World News.</a>   \\   Single.</p>
                </div>
            
            	<!-- Main Content -->
                <div class="full-width">
                    
                    <!-- Single -->
                    <div class="column-one-fourth">
                    	<h1>Heading 1</h1>
                        <h2>Heading 2</h2>
                        <h3>Heading 3</h3>
                        <h4>Heading 4</h4>
                        <h5>Heading 5</h5>
                        <h6>Heading 6</h6>
                    </div>
                    <div class="column-three-fourth features">
                    	<p>Morbi leo risus, <span class="highlight">porta ac consectetur ac</span>, vestibulum at eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, <a href="#" id="tooltip" title="Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibusparturient montes.">Test Tooltip</a> nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                        <ul>
                        	<li>List item 1</li>
                            <li>List item 2</li>
                            <li>List item 3</li>
                            <li>List item 4</li>
                            <li>List item 5</li>
                        </ul>
                        
                        <ul class="check">
                        	<li>List item 1</li>
                            <li>List item 2</li>
                            <li>List item 3</li>
                            <li>List item 4</li>
                            <li>List item 5</li>
                        </ul>
                        
                        <ol>
                        	<li>List item 1</li>
                            <li>List item 2</li>
                            <li>List item 3</li>
                            <li>List item 4</li>
                            <li>List item 5</li>
                        </ol>
                        
                        <blockquote>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibusparturient montes.</blockquote>
                    </div>
                    
                    <div class="column"></div>
                    
                    <div class="column-two-third">
                    	<div id="tabs">
                            <ul>
                                <li><a href="#tabs1">Tab 1.</a></li>
                                <li><a href="#tabs2">Tab 2.</a></li>
                                <li><a href="#tabs3">Tab 3.</a></li>
                            </ul>
                            <div id="tabs1">
                                <p>Proin neque dui, pretium quis fringilla ut, sodales sed metus. Proin tincidu vestibulum tempor. In scelerisque nibh tempus felis dictum eu auctor mauris consectetur. Vestibulum tempor feugiat est in posuere.</p>
                                <p>Proin neque dui, pretium quis fringilla ut, sodales sed metus. Proin tincidu vestibulum tempor. In scelerisque nibh tempus felis dictum eu auctor mauris consectetur. Vestibulum tempor feugiat est in posuere. Sed auctor libero augue, a faucibus turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere.</p>
                            </div>
                            <div id="tabs2">
                                <p>Neque dui, pretium quis fringilla ut, sodales sed metus. Proin tincidu vestibulum tempor. In scelerisque nibh tempus felis dictum eu auctor mauris consectetur. Vestibulum tempor feugiat est in posuere.</p>
                                <p>Dui, pretium quis fringilla ut, sodales sed metus. Proin tincidu vestibulum tempor. In scelerisque nibh tempus felis dictum eu auctor mauris consectetur. Vestibulum tempor feugiat est in posuere. Sed auctor libero augue, a faucibus turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere.</p>
                            </div>
                            <div id="tabs3">
                                <p>Dark proin neque dui, pretium quis fringilla ut, sodales sed metus. Proin tincidu vestibulum tempor. In scelerisque nibh tempus felis dictum eu auctor mauris consectetur. Vestibulum tempor feugiat est in posuere.</p>
                                <p> Green proin neque dui, pretium quis fringilla ut, sodales sed metus. Proin tincidu vestibulum tempor. In scelerisque nibh tempus felis dictum eu auctor mauris consectetur. Vestibulum tempor feugiat est in posuere. Sed auctor libero augue, a faucibus turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere.</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="column-one-third">
                    	<div id="accordion">
                        
                            <h3>Poserue Clubre.</h3>
                            <div>
                                <p>Vestibulum tempor feugiat est in posuere. Sed auctor libero augue, a faucibus turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices. posuere.</p>
                            </div>
                            
                            <h3>Lubelia Mest.</h3>
                            <div>
                                <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.</p>
                            </div>
                        
                            <h3>Tincidunt Massa.</h3>
                            <div>
                                <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac liberoac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.</p>
                            </div>
                            
                        </div>
                    </div>
                    
                    <div class="column"></div>
                    
                    <div class="column-one-half">
                    	<div class="notifications error">
                            <p><span>Error!</span> Your Message Goes Here. Maybe, it is too long and harsh</p>
                            <span class="closer">x</span>
                        </div>
                        <div class="notifications info">
                            <p><span>Info!</span> Your Message Goes Here.</p>
                            <span class="closer">x</span>
                        </div>
                        <div class="notifications success">
                            <p><span>Success!</span> Your Message Goes Here.</p>
                            <span class="closer">x</span>
                        </div>
                        <div class="notifications notice">
                            <p><span>Notice!</span> Your Message Goes Here.</p>
                            <span class="closer">x</span>
                        </div>  
                    </div>
                    
                    <div class="column-one-half">
                    	<p><span class="dropcap">A</span>tam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac liberoac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.</p>
                        
                        <p><span class="dropcap2">A</span>tam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac liberoac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.</p>
                    </div>
                    <!-- /Single -->
                    
                    <div class="column">
                    	<table>
                            <tr>
                                <th>Header 1</th>
                                <th>Header 2</th>
                                <th>Header 3</th>
                            </tr>
                            <tr>
                                <td>Unlimited Users</td>
                                <td>Unlimited Users</td>
                                <td>Unlimited Users</td>
                            </tr>
                            <tr>
                                <td>Unlimited Users</td>
                                <td>Unlimited Users</td>
                                <td>Unlimited Users</td>
                            </tr>
                            <tr>
                                <td>Unlimited Users</td>
                                <td>Unlimited Users</td>
                                <td>Unlimited Users</td>
                            </tr>
                            <tr>
                                <td>Unlimited Users</td>
                                <td>Unlimited Users</td>
                                <td>Unlimited Users</td>
                            </tr>
                        </table>
                    </div>
                    
                </div>
                <!-- /Main Content -->
                
            </div>    
        </section>
        <!-- / Content -->
        
        <!-- Footer -->
        <footer id="footer">
            <div class="container">
            	<div class="column-one-fourth">
                    <h5 class="line"><span>Tweets.</span></h5>
                    <div id="tweets"></div>
                </div>
                <div class="column-one-fourth">
                    <h5 class="line"><span>Navigation.</span></h5>
                    <ul class="footnav">
                    	<li><a href="#"><i class="icon-right-open"></i> World.</a></li>
                        <li><a href="#"><i class="icon-right-open"></i> Business.</a></li>
                        <li><a href="#"><i class="icon-right-open"></i> Politics.</a></li>
                        <li><a href="#"><i class="icon-right-open"></i> Sports.</a></li>
                        <li><a href="#"><i class="icon-right-open"></i> Health.</a></li>
                        <li><a href="#"><i class="icon-right-open"></i> Sciences.</a></li>
                        <li><a href="#"><i class="icon-right-open"></i> Spotlight.</a></li>
                    </ul>
                </div>
                <div class="column-one-fourth">
                    <h5 class="line"><span>Flickr Stream.</span></h5>
                    <div class="flickrfeed">
                        <ul id="basicuse" class="thumbs"><li class="hide"></li></ul>
                    </div>
                </div>
                <div class="column-one-fourth">
                    <h5 class="line"><span>About.</span></h5>
                    <p>Blandit rutrum, erat et egestas ultricies, dolor tortor egestas enim, quiste rhon cus sem purus eu sapien. Lorem ipsum dolor sit amet adipcising elit. Elit norem simuls tortor lorem adipcising purus mosteu dsapien egestas.</p>
                </div>
                <p class="copyright">Copyright &copy; 2014.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
            </div>
        </footer>
        <!-- / Footer -->
    
    </div>
	</div>
</div>
<!-- / Body Wrapper -->


<!-- SCRIPTS -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easing.min.js"></script>
<script type="text/javascript" src="js/1.8.2.min.js"></script>
<script type="text/javascript" src="js/ui.js"></script>
<script type="text/javascript" src="js/carouFredSel.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/customM.js"></script>
<script type="text/javascript" src="js/flexslider-min.js"></script>
<script type="text/javascript" src="js/tweetable.js"></script>
<script type="text/javascript" src="js/timeago.js"></script>
<script type="text/javascript" src="js/jflickrfeed.min.js"></script>
<script type="text/javascript" src="js/mobilemenu.js"></script>

<!--[if lt IE 9]> <script type="text/javascript" src="js/html5.js"></script> <![endif]-->
<script type="text/javascript" src="js/mypassion.js"></script>


</body>
</html>
